<!--
 * @Author: 吴竹叶 2107206923@qq.com
 * @Date: 2023-09-27 16:02:37
 * @LastEditors: 吴竹叶 2107206923@qq.com
 * @LastEditTime: 2023-10-18 13:57:50
 * @FilePath: \BZ_JT_AnQuanHuanBaoGuanLiApp\src\views\staging\commom\statistics\safetyStatistic.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="carbon-wrap">
    <div class="carbon-box">
      <customTitle :is-icon="true" icon="&#xe791;" bg-color="#07cdd4" icon-color="#07cdd4" title="碳排放综合看板">
        <template #right>
          <custom-timer type="year" :is-interval="false" :is-title="false" :is-border="false" :date-value.sync="currenYear" picker-title="" :is-clear="false" @change="getData" />
        </template>
      </customTitle>
      <div class="carbon-content">
        <ul>
          <li v-for="(it, ind) in carbonData" :key="ind">
            <div>
              <label>{{ it.value }}<b v-if="it.value!=='/'">{{ it.unit }}</b></label>
              <span class="name">{{ it.name }}</span>
            </div>
            <i class="iconfont" v-html="it.icon" />
          </li>
        </ul>
      </div>
      <div class="carbon-content1">
        <ul>
          <li v-for="(it, ind) in carbonData1" :key="ind">
            <i class="iconfont" v-html="it.icon" />
            <b>{{ it.value }}个</b>
            <span class="name">{{ it.name }}</span>
          </li>
        </ul>
      </div>
    </div>
    <customTitle :is-line="true" bg-color="#3795ff" title="不同行业碳排放量分析" />
    <div ref="pieChart" class="pieChart-area" style="height: 200px" />
    <customTitle :is-line="true" bg-color="#3795ff" title="企业碳排放排名TOP10" />
    <div class="table-list common_list">
      <template v-if="tableList && tableList.length > 0">
        <div v-for="(item, index) in tableList" :key="index" class="list_item">
          <div class="content_area">
            <div class="number_order">{{ index + 1 }}</div>
            <div class="right_content">
              <div class="content_title" style="max-width: 100%">
                {{ item.companyName }}
              </div>
              <ul>
                <li>
                  <i class="iconfont c-text-primary">&#xe61c;</i>
                  <div class="label">碳排放量：</div>
                  <div class="value">{{ item.emissions }}（万吨二氧化碳当量）</div>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </template>
      <template v-else>
        <el-empty />
      </template>
    </div>
  </div>
</template>

<script>
import customTitle from '@/components/globals/custom-title.vue'
import customTimer from '@/components/common/custom-timer.vue'
import { pieChart } from '@/utils/chart'
import { parseTime } from '@/utils'
import { emissionsDashboard, emissionsTop10, industryAnalyse } from '@/api/carbon'
import commonList from '@/assets/mixin/commonList'

export default {
  components: {
    customTitle,
    customTimer
  },
  inject: ['layout'],
  mixins: [commonList],
  data() {
    return {
      carbonData: [
        { name: '碳排放总量', value: '4618.1', unit: '万吨二氧化碳当量', icon: '&#xe61c;' },
        { name: '万元产值（收入）二氧化碳排放（可比价）', value: '5000', unit: '吨二氧化碳当量/万元', icon: '&#xe629;' },
        { name: '二氧化碳减排量', value: '1288', unit: '万吨二氧化碳当量', icon: '&#xe6b6;' }
      ],
      carbonData1: [
        { name: 'CCER项目总数', value: '85 个', icon: '&#xe634;' },
        { name: 'CCUS项目总数', value: '158 个', icon: '&#xe61c;' },
        { name: '纳入碳排放体系企业数量', value: '120个', icon: '&#xe725;' }
      ],
      currenYear: parseTime(new Date(), '{y}'),
      tableList: [],
      apiNum: 3,
      loadNum: 0,
      total: ''
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    getData() {
      this.layout.showAreaLoading(['.carbon-box', '.pieChart-area', '.table-list'])
      this.emissionsDashboard()
      this.industryAnalyse()
      this.emissionsTop10()
    },
    closeLoading() {
      this.loadNum++
      if (this.loadNum >= this.apiNum) {
        this.layout.hideAreaLoading(['.carbon-box', '.pieChart-area', '.table-list'])
      }
    },
    async emissionsDashboard() {
      const { data, status } = await emissionsDashboard({ year: this.currenYear })
      if (data && status === 0) {
        this.carbonData[0].value = data[0]?.dischargeValue
        this.carbonData[1].value = data[0]?.emissions
        this.carbonData[2].value = data[0]?.emissionReductions
        this.carbonData1[0].value = data[0]?.ccerCounts
        this.carbonData1[1].value = data[0]?.ccusCounts
        this.carbonData1[2].value = data[0]?.companyCounts
      }
      this.closeLoading()
    },
    async industryAnalyse() {
      const { data, status } = await industryAnalyse({ year: this.currenYear })
      if (data && status === 0) {
        this.total = data.total
        data.dataList.forEach((v) => {
          if (v) {
            v.name = v.industryType
            v.value = v.dischargeValue
          }
        })
        this.initPieChart(data.dataList)
      }
      this.closeLoading()
    },
    async emissionsTop10() {
      const { data, status } = await emissionsTop10({ year: this.currenYear })
      if (data && status === 0) {
        this.tableList = data
      }
      this.closeLoading()
    },
    initPieChart(data) {
      // const colorList = ['#6395f9', '#62daab', '#657798']
      // const data = [
      //   { name: '机械设备制造', num: 5 },
      //   { name: '工业其他行业', num: 9 },
      //   { name: '陆上交通运输', num: 11 }
      // ]
      const dataList = data.map((v, i) => {
        return {
          value: v.value,
          name: v.name,
          // itemStyle: { color: colorList[i] },
          label: { color: '#333', position: 'outside', formatter: '{d}%', show: v.value > 0 },
          labelLine: { show: v.value > 0 }
        }
      })
      console.log(this.total)
      const dataSeries = [
        {
          name: '碳排放量分析',
          radius: ['50%', '70%'],
          center: ['50%', '40%'],
          data: dataList
        }
      ]
      const params = {
        tooltipShow: true,
        legendShow: false,
        legendBottom: 1,
        titleShow: true,
        fontSize: 14,
        titleArr: [
          { text: '碳排放总量', y: '30%', fontSize: 14 },
          { text: `${this.total}`, y: '40%', fontSize: 16 }
        ],
        // titleText: '碳排放总量 \n     ' + this.total,
        // titleX: '39%',
        // titleY: '30%',
        titleColor: '#333',
        tooltipFormatter: (params) => {
          return `${params.seriesName}<br/>${params.marker}${params.name}：${params.value}(${params.percent}%)<br/>`
        }
      }
      const chart = this.$refs.pieChart
      if (chart) {
        if (this.total > 0) {
          const myChart = this.$echarts.init(chart)
          const options = pieChart(params, dataSeries)
          myChart.setOption(options, true)
          this.setLegend(chart, myChart)
          window.addEventListener('resize', () => {
            myChart.resize()
          })
        } else {
          this.layout.chartNoData(chart)
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.carbon-wrap {
  background-color: #fff;
  .carbon-content {
    width: 100%;
    li {
      background-color: #eafeff;
      margin-bottom: 0.267rem;
      display: flex;
      padding: 0.267rem;
      justify-content: space-between;
      border-radius: 8px;
      border: solid 1px #07cdd4;
      div {
        display: flex;
        flex-direction: column;
        label {
          font-size: 0.533rem;
          margin-bottom: 0.133rem;
          color: #07cdd4;
          font-weight: bold;
          b {
            font-size: 0.267rem;
            margin-left: 0.133rem;
          }
        }
        span {
          line-height: 0.373rem;
          font-size: 0.373rem;
        }
      }
      i {
        font-size: 0.667rem;
        color: #fff;
        background-color: #07cdd4;
        width: 0.933rem;
        height: 0.933rem;
        line-height: 0.933rem;
        text-align: center;
        border-radius: 0.158rem;
        margin-bottom: 0.133rem;
      }
      &:nth-child(2) {
        background-color: #ebf5ff;
        border: 1px solid #3f99ff;
        label {
          color: #3f99ff;
        }
        i {
          background-color: #3f99ff;
        }
      }
      &:nth-child(3) {
        background-color: #fff6ec;
        border: 1px solid #ff8a00;
        label {
          color: #ff8a00;
        }
        i {
          background-color: #ff8a00;
        }
      }
    }
  }
  .carbon-content1 {
    ul {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      li {
        width: calc(33% - 5px);
        background-color: #eafeff;
        margin-bottom: 0.267rem;
        display: flex;
        flex-direction: column;
        padding: 0.267rem;
        i {
          font-size: 0.667rem;
          color: #fff;
          background-color: #07cdd4;
          width: 0.933rem;
          height: 0.933rem;
          line-height: 0.933rem;
          text-align: center;
          border-radius: 0.158rem;
          margin-bottom: 0.133rem;
        }
        b {
          font-size: 0.533rem;
          margin-bottom: 0.133rem;
          color: #07cdd4;
          font-weight: bold;
        }
        span {
          line-height: 0.373rem;
        }
        &:nth-child(2) {
          background-color: #fff6ec;
          i {
            background-color: #ff8a00;
          }
          b {
            color: #ff8a00;
          }
        }
        &:nth-child(3) {
          background-color: #ebf2ff;
          i {
            background-color: #6a99f9;
          }
          b {
            color: #6a99f9;
          }
        }
        &:nth-child(4) {
          background-color: #e7fdf6;
          i {
            background-color: #42d7a7;
          }
          b {
            color: #42d7a7;
          }
        }
        &:nth-child(5) {
          background-color: #ebf5ff;
          i {
            background-color: #3f99ff;
          }
          b {
            color: #3f99ff;
          }
        }
        &:nth-child(6) {
          background-color: #eafeff;
          i {
            background-color: #07cdd4;
          }
          b {
            color: #07cdd4;
          }
        }
      }
    }
  }
  .customTimer {
    margin: 0;
    width: 2.133rem;
    border: 1px solid #3795ff;
    border-radius: 0.106rem;
    ::v-deep .timer-box .down {
      color: #3795ff;
    }
  }
}
</style>
